<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<script  src="../jquery-2.1.1.js"></script>
<style type="text/css">
	ul,li,img,a{margin:0;paddong:0;list-style:none;}
	ul{width:100%;height:50px;}
	ul:after{content""; display:block;clear:both;}
	li{float:left; margin:0 10px; text-align:center;}
	li a{display:block; text-decoration:none; border:1px solid #dcdcdd; padding:0 10px;}
	img{width:500px;height:500px;}
	.img a{ display:none;}
</style>
</head>

<body>
<div class="body">
<ul>
	<li><a href="javascript:void(0);">1</a></li>
	<li><a href="javascript:void(0);">2</a></li>
	<li><a href="javascript:void(0);">3</a></li>
	<li><a href="javascript:void(0);">4</a></li>
</ul>
<div class="img">
	<a href="javascript:void(0);" style="display:block;"><img src="4845745_195609329636_2.jpg" /></a>
	<a href="javascript:void(0);"><img src="200812910493588_2.jpg" /></a>
	<a href="javascript:void(0);"><img src="4845745_195609329636_2.jpg" /></a>
	<a href="javascript:void(0);"><img src="200812910493588_2.jpg" /></a>
</div>
</div>
<script type="text/javascript">
	$(function(){
		$("li").click(function(){
			$(".img a").eq($(this).index()).show().siblings("a").hide();//点击按钮切换图片
		})
		var i=0;
		var timer=setInterval(function(){
			i=i>=($("li").length-1)?0:++i;//判断i的值，如果大于li的个数则变为0；
			$("li").eq(i).trigger("click");	//委托执行click事件		
		},2000);//两秒切换一次
		$("li,img").hover(function(){
			clearInterval(timer);//鼠标移入，移除定时器
		},function(){
			timer=setInterval(function(){
			i=i>=($("li").length-1)?0:++i;
			console.log(i)
			$("li").eq(i).trigger("click");
			
		},2000);//鼠标移除，增加定时器
		});
	});
</script>

</body>
</html>